<template>
    <van-row class="container">
        <van-row>
            <van-image :src="bgurl"  fit="contain"></van-image>
        </van-row>
        <van-row style="margin-top:30px;margin-bottom: 10vh">
                <van-row class="rank-item" v-for="(item,index) in rankList" :key="index">
                    <van-col :span="6" :class="index <=2 ? 'rank-item-left front-three':'rank-item-left'">第<span :class="index <=2 ?'paiming':'paiming-not-three'">{{index+1}}</span>名</van-col>
                    <van-col :span="12" class="rank-item-middle">
                        <span class="rank-item-content van-ellipsis">{{item.voteItemNumber}}号作品</span>
                        <span class="rank-item-content van-ellipsis">票数:<span class="rank-font">{{item.voteItemCount}}</span></span>
                    </van-col>
                    <van-col :span="6" class="rank-item-right"><van-button class="vote-btn" @click="handleVote(item.id)">去投票</van-button></van-col>
                </van-row>
        </van-row>
    </van-row>
</template>

<script>
    import {rankingList} from "../../api/vote";
    import {getUrlKey} from "@/utils/url";

    export default {
        name: "rankinglist",
        data(){
            return{
                bgurl:require("../../assets/voteimg/pic-3.jpg"),
                rankList:[],
            }
        },
        mounted(){
            const voteId =getUrlKey("voteId") || localStorage.getItem("voteId") ;
            if(voteId===null||voteId===undefined){
                this.$router.push("/501")
            }
            else{
                localStorage.setItem("voteId",voteId);
            }
            this.handleGetRankList();
        },
        methods:{
            handleGetRankList(){
                rankingList(localStorage.getItem("voteId")).then(res=>{
                    this.rankList = res.data;
                })
            },
            handleVote(itemId){
                this.$router.push({path:"/details",query:{itemId:itemId,voteId:localStorage.getItem("voteId")}})
            }
        }
    }
</script>

<style scoped>
    .rank-item{
        position: relative;
        height: 50px;
        line-height: 50px;
        margin: 16px;
        border: 1px solid #000000;
    }
    .rank-item-left{
        background-color: #F6DE60;
    }
    .front-three{
        line-height: 47px;
    }
    .rank-font{
        color: #1A4262;
        font-family: HYGangYiTiJ;
        font-weight: 600;
    }
    .rank-item-right{
        line-height: 50px;
    }
    .vote-btn{
        height: 36px;
        /* line-height: 30px; */
        border-radius: 0;
        border: 0;
        background-color: #1A4262;
        color: #ffffff;
    }
    .rank-item-content{
        line-height: 24px;
        margin: 0 10px
    }
    .rank-item-middle{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 50px;
        /*line-height: 24px;*/
    }

    .paiming{
        font-size: 24px;
        font-weight: bold;
        color: #1A4262;
        margin: 0 3px;
    }
    .paiming-not-three{
        margin: 0 3px;
    }
    .rank-item:nth-child(-n+3)::before{
        content:"";
        position: absolute;
        width:36px;
        height:28px;
        top:-22px;
        left:-10px;
        background-image: url("../../assets/voteimg/pic-3-1.png");
        background-position:center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .rank-item:nth-child(2){
        margin: 30px 16px;
    }
</style>
